<template>
	<view class="tutorList">
		<tui-navigation-bar :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
			@init="initNavigation" title="教练管理" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar>
		<view class="header_tab_order" :style="{ marginTop: marginTp + 'px' }">
			<tutor-nav-tab ref="navTabs" :tabTitle="list" @changeTab="changeTab"></tutor-nav-tab>
		</view>
		<view class="list_content" v-if="tabIndex===0">
			<TutorDetails ref="TutorDetailsRef" :ossUrl="ossUrl" :id="id"></TutorDetails>
		</view>

		<view class="orderlist_content" :style="[{height:'calc(100vh - '+marginTp*2+'px)'}]" v-else-if="tabIndex===1">
			<tutor-nav-tab ref="navTabs" :tabTitle="lists" @changeTab="changeOrderTab"></tutor-nav-tab>
			<view class="order_Content">
				<z-paging ref="paging" :fixed="false" v-model="listData" @query="queryList">
					<OrderItem :ossUrl="ossUrl" :orderList="listData"></OrderItem>
				</z-paging>
			</view>
		</view>
		<view class="listrunning_contents" v-else>
			<view class="timeSlect">
				<view class="date">
					<view class="startDate" @tap="show('start')"><text>{{starDate ? starDate:'开始日期'}}</text></view>
					<view class="line"></view>
					<view class="startDate" @tap="show('end')"><text>{{endDate ? endDate:'结束日期'}}</text></view>
				</view>
				<tui-form-button @click="selectRunning" size="28" color="#000" width="120rpx" height="56rpx"
					background="#fff">
					筛选
				</tui-form-button>
			</view>
			<view class="earnings">
				<TutorRunning :listData="listData"></TutorRunning>
			</view>
		</view>
		<view class="footer" v-if="tabIndex===0">
			<tui-form-button @click="deleteTutor" width="210rpx" size="28" height="84rpx" plain background="#63d6d3"
				color="#63d6d3" radius="66rpx">删除</tui-form-button>
			<tui-form-button @click="downline" width="210rpx" size="28" margin="0 0 0 20rpx" height="84rpx" plain
				background="#63d6d3" color="#63d6d3" radius="66rpx">{{status!==0 ? '上线':'下线'}}</tui-form-button>
			<tui-form-button @click="editAccunt" margin="0 0 0 20rpx" radius="66rpx" size="28" color="#fff"
				width="210rpx" height="84rpx" background="#2FD7D3">
				账号修改
			</tui-form-button>
		</view>
		<tui-drawer mode="bottom" :backgroundColor="'rgba(0, 0, 0, 0)'" z-index="10000" :visible="visible"
			@close="closeDrawer">
			<view class="account-container">
				<view class="top">
					<text class="titleTxt">教练修改</text>
					<view class="close" @tap="visible=false">
						<image class="closeImg" src="/static/user/icon_off@2x.png"></image>
					</view>
				</view>
				<view class="content">
					<view class="inputItem">
						<view class="label"><text>账号</text></view>
						<view class="divide"></view>
						<view class="input">
							<tui-input padding="0" radius="24" size="28" backgroundColor="#F5F5F5" color="#999999"
								:borderBottom="false" :borderTop="false" placeholder="请输入账号" clearable
								v-model="phoneNumber"></tui-input>
						</view>
					</view>
					<view class="inputItem">
						<view class="label"><text>密码</text></view>
						<view class="divide"></view>
						<view class="input">
							<tui-input password padding="0" radius="24" size="28" backgroundColor="#F5F5F5"
								color="#999999" :borderBottom="false" :borderTop="false" placeholder="请输入密码" clearable
								v-model="password"></tui-input>
						</view>
					</view>
				</view>
				<view class="buttons">
					<tui-form-button :loading="isCofimLoading" @click="cofrimEdit" width="330rpx" size="32"
						height="84rpx" plain background="#63d6d3" color="#63d6d3" radius="66rpx">确认修改</tui-form-button>
					<tui-form-button @click="copyText" margin="0 0 0 30rpx" radius="66rpx" size="32" color="#fff"
						width="330rpx" height="84rpx" background="#2FD7D3">
						一键复制
					</tui-form-button>
				</view>
			</view>
		</tui-drawer>
		<tui-datetime ref="dateTime" @confirm="change" :type="8" :startYear="2025" :endYear="2025"></tui-datetime>
		<tui-calendar isFixed :type="2" ref="calendar" @change="change_date"></tui-calendar>
	</view>
</template>

<script>
	import TutorDetails from './compontents/tutorDetails/tutorDetails.vue'
	import TutorRunning from './compontents/tutorRunning/tutorRunning.vue'
	import OrderItem from './compontents/orderItem/orderItem.vue'
	import {
		delTutor,
		editTutorAccount,
		editTutorAssistant,
		getTutorDetails
	} from '@/http/api/tutor/tutor.js'
	import {
		getOrderList
	} from '@/http/api/order/order.js'
	import {
		getOrderIncomeInfo
	} from '@/http/api/distribution/distribution.js'
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp: 0,
				id: null, //教练id
				type: 0,
				currentTab: 0,
				listData: [],
				starDate: this.$utils.getCurrentTime(), //开始日期
				endDate: this.$utils.getCurrentTime(), //结束日期
				isTime: false,
				orderList: [], //订单列表
				isCofimLoading: false, //保存修改
				phoneNumber: '', //账号
				password: '', //密码
				ossUrl: getApp().globalData.ossurl, //图片前缀
				tabIndex: 0,
				visible: false,
				status: 0, //状态
				list: [{
						text: '教练详情'
					},
					{
						text: '教练订单'
					},
					{
						text: '教练流水'
					}
				],
				lists: [{
						text: '全部订单'
					},
					{
						text: '邀约中'
					},
					{
						text: '已确认'
					},
					{
						text: '服务中'
					},
					{
						text: '待评价'
					},
					{
						text: '已完成'
					}
				]
			}
		},
		components: {
			TutorDetails,
			TutorRunning,
			OrderItem
		},
		onUnload() {
			uni.$off('tutorRefresh')
		},
		onLoad(options) {
			let a = this.getLast30DaysRange()
			this.starDate = a.startDate;
			this.endDate = a.endDate;
			console.log(a)
			if (options) {
				this.id = options.id
			}
			uni.$on('tutorRefresh', (e) => {
				if (e) {
					this.$refs.TutorDetailsRef && this.$refs.TutorDetailsRef.getDetails()
				}
			})
			this.getDetails()

		},
		methods: {
			//获取教练详情
			getDetails() {
				getTutorDetails({
					id: this.id
				}).then(res => {
					if (res.code === 200) {
						this.status = res.data.status * 1
					}
				})
			},
			//下线
			downline() {
				editTutorAssistant({
					id: this.id,
					status: this.status !== 0 ? 0 : 3
				}).then(res => {
					if (res.code === 200) {
						this.status !== 0 ? this.status = 0 : this.status = 3
						this.$utils.toast(this.status === 0 ? '上线成功' : '下线成功')
					}
				})
			},
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			back() {
				uni.navigateBack({
					delta: 1
				});;
			},
			changeTab(index) {
				this.tabIndex = index;
				switch (index) {
					case 0:
						this.$refs.TutorDetailsRef && this.$refs.TutorDetailsRef.getDetails()
						break;
					case 1:
						setTimeout(() => {
							this.$refs.paging && this.$refs.paging.reload()
						})
						break;
					default:
						this.selectRunning()
						break;
				}
			},
			//订单状态切换
			changeOrderTab(index) {
				this.currentTab = index;
				// 状态 0全部，1，邀约中，2已确认，3服务中，，5待评价，6已完成
				switch (index) {
					case 0:
						this.type = 0
						break;
					case 1:
						this.type = 1
						break;
					case 2:
						this.type = 2
						break;
					case 3:
						this.type = 3
						break;
					case 4:
						this.type = 5
						break;
					default:
						this.type = 6
						break;
				}
				this.$refs.paging.reload()
			},
			editAccunt() {
				this.phoneNumber = ''
				this.password = ''
				this.visible = true
			},
			closeDrawer() {
				this.visible = false
			},
			//调用此方法显示选择器，需等组件初始化完成后调用，避免在onLoad中调用
			show: function(e) {
				// if (e === 'start') {
				// 	this.isTime = false
				// } else {
				// 	this.isTime = true
				// }
				this.$refs.calendar && this.$refs.calendar.show();
			},
			//选择时间
			change: function(e) {
				//选择的结果
				if (this.isTime) {
					this.endDate = e.result;
				} else {
					this.startDate = e.result;
				}
				console.log(e);
			},
			//确认时间范围 //获取账户收支明细
			selectRunning() {
				let a = {
					type: 1,
					id: this.id,
					starDate: this.starDate,
					endDate: this.endDate,
				}
				console.log(a)
				getOrderIncomeInfo({
					type: 1,
					id: this.id,
					starDate: `${this.starDate} 00:00:00`,
					endDate: `${this.endDate} 23:59:59`,
				}).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.listData = res.data
					}
					console.log(res, '数据')
				}).catch(err => {
					console.log(err)
				})
			},
			//确认修改
			cofrimEdit() {
				this.isCofimLoading = true
				editTutorAccount({
						phoneNumber: this.phoneNumber,
						password: this.password,
						id: this.id
					}).then(res => {
						if (res.code === 200) {
							this.$utils.toast('修改成功')
							this.visible = false
						}
					})
					.finally(() => {
						this.isCofimLoading = false
					})
			},
			//复制
			copyText() {
				uni.setClipboardData({
					data: this.password,
					success: function() {}
				});
			},
			//删除教练
			deleteTutor() {
				let that = this
				uni.showModal({
					title: "温馨提示",
					content: '确认删除该教练吗?',
					confirmText: "确认",
					showCancel: '取消',
					success: (res) => {
						if (res.confirm) {
							delTutor(this.id).then(res => {
								if (res.code === 200) {
									that.$utils.toast('删除成功')
									uni.$emit('tutorShopRefresh', true)
									uni.navigateBack()
								}
							})
						}
					},
				});
			},
			queryList(pageNo, pageSize) {

				getOrderList({
					pageNum: pageNo,
					pageSize,
					assistantId: this.id,
					status: this.type
				}).then(res => {
					console.log(res, 'getOrderList')
					if (res.code == 200) {
						this.$refs.paging.complete(res.rows);
					} else {
						self.$utils.toast(res.msg);
					}
				})
			},
			// 切换日期
			change_date(e) {
				console.log(e)
				this.starDate = `${e.startDate}`;
				this.endDate = `${e.endDate}`
			},
			getLast30DaysRange() {
				const endDate = new Date(); // 今天的日期
				const startDate = new Date();
				startDate.setDate(endDate.getDate() - 29); // 开始日期为 30 天前（包括今天）

				// 格式化日期为 YYYY-MM-DD HH:mm:ss
				const format = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');
					const seconds = String(date.getSeconds()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				};

				return {
					startDate: format(startDate),
					endDate: format(endDate),
				};
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './tutorList.scss';
</style>